<template>
  <div class="employee">
    <!-- 选项卡 -->
    <el-tabs v-model="param.status" >
      <el-tab-pane label="所有员工" name="all"></el-tab-pane>
      <el-tab-pane label="未审核" name="未审核"></el-tab-pane>
      <el-tab-pane label="审核通过" name="用户正常"></el-tab-pane>
      <el-tab-pane label="审核不通过" name="用户禁用"></el-tab-pane>
    </el-tabs>
    <!-- 员工列表 -->
    <!-- 表格 -->
    <el-table size="small" :data="employees">
      <el-table-column label="#" type="index" align="center" :index="1"></el-table-column>
      <el-table-column label="用户名" prop="realname" width="120"></el-table-column>
      <el-table-column label="手机号" prop="telephone" width="120"></el-table-column>
      <el-table-column label="身份证号码" prop="idCard" width="120"></el-table-column>
      <el-table-column label="银行卡号" prop="bankCard" width="120"></el-table-column>
      <el-table-column label="注册时间" width="200">
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{getTime(scope.row.registerTime)}}</span>
      </template>
      </el-table-column>
      <el-table-column label="状态" prop="status"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="check(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
    <!-- /模态框 -->
    <el-dialog title="员工审核" :visible.sync="visible">
      <p>用户名：{{this.emp.realname}}</p>
      <p>身份证号码：{{this.emp.idCard}}</p>
      <div>
        <p>身份证正面照片</p>:
        <img
          style="width:368px; height:207px; border-radius:3px"
          :src="'http://5b0988e595225.cdn.sohucs.com/images/20171201/7d25c931d82346a5843df5c8cc0c53ca.jpeg'"
          alt
        />
        <p>身份证反面照片</p>:
        <img
          style="width:368px; height:207px; border-radius:3px"
          :src="'http://binzhou.dzwww.com/xwjj/201306/W020130630599321061233.jpg'"
          alt
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pass()" size="small">审核通过</el-button>
        <el-button type="danger" @click="fail()" size="small">审核不通过</el-button>
      </div>
    </el-dialog>
    <!-- /模态框 -->
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      param:{
        status:'all'
      },
      visible: false,
      employees: [],
      emp: []
    };
  },
  created() {
    this.loadEmployees();
  },
  watch:{
    // 监听param的变化，一旦变化立刻查询
    param:{
      handler:function(){
        this.loadEmployees()
      },
      deep:true
    }
  },
  methods: {
    // 加载员工信息
    loadEmployees(){
      let url = "http://47.92.81.116:8888/check/queryEmployees_check"
      // 当状态为all，说明查询所有员工，不对员工状态进行过滤，删除这个属性即可
      // 1. 克隆param
      let param = Object.assign({},this.param);
      // 2. 处理数据
      if(param.status == 'all'){
        delete param.status;
      }
      get(url,param).then((response)=>{
        this.employees = response.data;
      })
    },
    check(row) {
      this.emp = row;
      this.visible = true;
    },
    pass(){
      let url = "http://47.92.81.116:8888/check/pass_employee";
      get(url, {id:this.emp.id}).then(response =>{
        this.$message({type:'success', message:response.message})
        this.loadEmployees();
      });
      this.visible = false;
    },
    fail(){
      let url = "http://47.92.81.116:8888/check/fail_employee";
      get(url, {id:this.emp.id}).then(response =>{
        this.$message({type:'success', message:response.message})
        this.loadEmployees();
      });
      this.visible = false;
    },
    getTime(time) {
      return new Date(parseInt(time)).toLocaleString().replace(/:\d{1,2}$/, " ");
    }
  }
};
</script>